<template>
    <div>
        <h1 v-text="msg" ref="title"></h1>
        <button ref="btn" @click="showDom">输出Dom信息</button>
        <School ref="sch"></School>
    </div>
</template>
<script>
    /**
     * ref属性：
     *  1.被用来给元素或子组件注册引用信息（id的替代者）
     *  2.应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（vc）
     *  3.使用方式：
     *      打标识：<h1 ref='xxx'>....</h1> 或<School ref='xxx'></School>
     *      获取：this.$refs.xxx
     */
    // 引入组件
    import School from './components/School.vue';
    export default {
        name:'App',
        components:{School},
        data(){
            return {msg:'欢迎学习Vue'}
        },
        methods:{
            showDom(){
                console.log(this.$refs.title) // 输出真实的DOM元素
                console.log(this.$refs.sch) // 输出School组件的实例对象(vc)
            }
        }
    }
</script>